<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" ref="form" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-button class="filter-item" type="primary" @click="showAddView">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="渠道名称" style="width: 200px" class="filter-item" clearable @clear="getTableData" />
                </el-form-item>
                <el-button class="filter-item" type="primary" native-type="submit" @click="getTableData">搜索</el-button>
            </el-form>
        </div>
    </div>

    <div class="page-body">
        <el-table ref="mainTable" :data="tableData" element-loading-text="Loading" border :default-expand-all="isExpand" :expand-row-keys="expandRows" :row-key="getRowKeys" highlight-current-row :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column label="编号" prop="id" width="150px" align="center">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <el-table-column label="渠道名称" prop="title">
                <template slot-scope="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column label="代码" prop="code" width="100px" align="center"></el-table-column>
            <el-table-column label="排序" prop="sort" width="100px" align="center"></el-table-column>
            <el-table-column label="上/下架" prop="status" width="100px" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 0" size="small" type="error">下架</el-tag>
                    <el-tag v-else size="small">上架</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300px" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="showEditView(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="deleteRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 页面组件 -->
    <edit-view ref="editView" @getTableData="getTableData"></edit-view>
</div>
</template>

<script>
import {
    getTreeApi,
    deleteSourceApi,
} from "@/api/system/dictionary/source";

import editView from "./edit.vue";

export default {
    components: {
        editView,
    },
    data() {
        return {
            query: {
                keyword: "",
            },
            tableData: [],
            isExpand: false,
            expandRows: [],
        };
    },
    created() {
        this.getTableData();
    },
    methods: {
        // 获取列表信息
        getTableData() {
            getTreeApi(this.query).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.tree;
                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
        // 获取行的id
        getRowKeys(row) {
            return row.id;
        },
        // 展开树
        changeExpand(e) {
            if (e) {
                let rows = [];
                this.tableData.forEach((ele) => {
                    if (ele.children) rows.push(ele.id + "");
                });
                this.expandRows = rows;
            } else {
                this.tableData.forEach((ele) => {
                    this.$refs['mainTable'].toggleRowExpansion(ele, false);
                });

            }
        },
        // 添加渠道
        showAddView() {
            if (this.$refs["editView"]) {
                this.$refs["editView"].showAddView();
            } else {
                this.$nextTick(function () {
                    this.$refs["editView"].showAddView();
                });
            }
        },
        showEditView(row) {
            if (this.$refs["editView"]) {
                this.$refs["editView"].showSaveView(row);
            } else {
                this.$nextTick(function () {
                    this.$refs["editView"].showSaveView(row);
                });
            }
        },
        deleteRow(row) {
            this.$confirm("确认删除该条信息?", "警告", {
                    type: "warning",
                })
                .then((res) => {
                    deleteSourceApi(row)
                        .then((res) => {
                            if (res.code == 200) {
                                this.getTableData();
                                this.$message.success(res.msg);
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch(res => {
                            this.$message.info("系统异常，请联系管理员");
                        });
                })
                .catch((res) => {
                    this.$message.info("您取消了删除操作");
                });
        },
    },
};
</script>

<style lang="less" scoped>
.page-body {
    overflow-y: auto;
}
</style>
